<template>
  <div>
    <a-card title="结业换证报名">
      <a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 10 }">
        <template slot="status" slot-scope="text">
          <a-badge :status="text === '已通过' ? 'success' : text === '待审核' ? 'processing' : 'error'" :text="text" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="viewDetail(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="editApplication(record)" v-if="record.status === '待审核'">编辑</a>
          <a-divider type="vertical" v-if="record.status === '待审核'" />
          <a @click="cancelApplication(record)" v-if="record.status === '待审核'">取消</a>
        </template>
      </a-table>
    </a-card>
    
    <a-modal
      title="报名详情"
      :visible="detailVisible"
      @ok="handleDetailOk"
      @cancel="handleDetailCancel"
      :width="800"
    >
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="学号">20230101</a-descriptions-item>
        <a-descriptions-item label="姓名">刘洋</a-descriptions-item>
        <a-descriptions-item label="学院">信息工程系</a-descriptions-item>
        <a-descriptions-item label="专业">计算机科学与技术</a-descriptions-item>
        <a-descriptions-item label="班级">计科2101</a-descriptions-item>
        <a-descriptions-item label="联系电话">13800138000</a-descriptions-item>
        <a-descriptions-item label="报名时间">2023-05-10 14:30:22</a-descriptions-item>
        <a-descriptions-item label="审核状态">待审核</a-descriptions-item>
        <a-descriptions-item label="未通过课程" :span="2">
          <a-tag color="red">高等数学(下)</a-tag>
          <a-tag color="red">大学物理(上)</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="申请说明" :span="2">
          因个人原因未能及时通过部分课程，现已完成相关课程学习，申请结业换证。
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '学院',
    dataIndex: 'college',
    key: 'college'
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major'
  },
  {
    title: '报名时间',
    dataIndex: 'applyTime',
    key: 'applyTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    studentId: '20230101',
    name: '刘洋',
    college: '信息工程系',
    major: '计算机科学与技术',
    applyTime: '2023-05-10 14:30:22',
    status: '待审核'
  },
  {
    key: '2',
    studentId: '20230102',
    name: '赵宇',
    college: '信息工程系',
    major: '软件工程',
    applyTime: '2023-05-11 09:15:33',
    status: '已通过'
  },
  {
    key: '3',
    studentId: '20230103',
    name: '周婷',
    college: '电子工程学院',
    major: '电子信息工程',
    applyTime: '2023-05-09 16:20:45',
    status: '未通过'
  }
]

export default {
  data() {
    return {
      columns,
      data,
      detailVisible: false
    }
  },
  methods: {
    viewDetail(record) {
      console.log('查看详情:', record)
      this.detailVisible = true
    },
    editApplication(record) {
      console.log('编辑报名:', record)
    },
    cancelApplication(record) {
      this.$confirm({
        title: '确认取消报名吗?',
        content: '取消后将需要重新提交申请',
        onOk: () => {
          this.data = this.data.filter(item => item.key !== record.key)
          this.$message.success('报名已取消')
        }
      })
    },
    handleDetailOk() {
      this.detailVisible = false
    },
    handleDetailCancel() {
      this.detailVisible = false
    }
  }
}
</script>